<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
	<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
	<title>工时统计</title>
	<script type="text/javascript" src="../../js/boot.js"></script>
	<script type="text/javascript" src="../../js/lib/echarts.min.js"></script>
</head>

<body>
	<div class="mini-splitter" style="width: 100%; height: 100%;">
		<div size="240" showCollapseButton="true">
			<div class="mini-fit">
				<ul id="pageTree" class="mini-tree" style="width: 100%;" showTreeIcon="true" allowDrag="true" allowDrop="true" textField="departName"
					idField="departID" resultAsTree="false">
				</ul>
			</div>
		</div>

		<div showCollapseButton="true">
			<fieldset id="fd1" style="width: 97%; margin-bottom: 10px;">
				<legend><span>查询条件</span></legend>
				<div id="queryForm" class="fieldset-body">
					<table class="form-table" border="0" cellpadding="0" cellspacing="0">
						<tr>
							<td class="form-label">
								<span>姓名：</span>
								<input id="txtUserID" class="mini-autocomplete" popupWidth="400" textField="userName" valueField="userID"
									style="width: 150px" />
								<span>项目名称：</span>
								<input id="txtprojectID" class="mini-autocomplete" popupWidth="400" textField="projectName" valueField="projectID"
									style="width: 150px" />
								<span>日期从：</span>
								<input id="calendarDate_from" name="calendarDate_from" class="mini-datepicker" format="yyyy-MM-dd" style="width: 150px" />
								<span>到：</span>
								<input id="calendarDate_to" name="calendarDate_to" class="mini-datepicker" format="yyyy-MM-dd" style="width: 150px" />
								<a style="margin: 0 0 0 0;" class="mini-button" iconCls="icon-search" onclick="doSearch()">查询</a>
							</td>
						</tr>
					</table>
				</div>
			</fieldset>

			<div class="mini-fit">
				<div id="main" style="width: 1200px; height: 600px;"></div>
			</div>
		</div>
	</div>

</body>

<script type="text/javascript">
	miniInit();

	var tree = mini.get("pageTree");
	http.get('/sys/depart/list.do', function (page) {
		tree.loadData(page);
	});
	var editNode = null; // 当前编辑的节点
	/*********************************************************
	 * 左侧目录树的鼠标点击事件
	 *********************************************************/
	tree.on("nodedblclick", function (e) {
		// debugger
		editNode = e.node;
		http.get('/sys/depart/list.do?departID=' + editNode.departID, function (page) {
			tree.addNodes(page, editNode);
			tree.expandNode(editNode);
		});
	});

	var txtUserID = mini.get("txtUserID");
	txtUserID.setName("userID");
	txtUserID.set({
		url: http.getUrl("/user/page.do")
	});

	var txtprojectID = mini.get("txtprojectID");
	txtprojectID.setName("projectID");
	txtprojectID.set({
		url: http.getUrl("/oa/project/project/page.do")
	});

	// 设置截止日期至今天
	var date = new Date();
	mini.get("calendarDate_to").setValue(date);
	date.setDate(date.getDate() - 15);
	mini.get("calendarDate_from").setValue(date);

	var queryForm = new mini.Form("#queryForm");

	var myChart = echarts.init(document.getElementById('main'));
	var option = {
		title: {
			text: '图纸完成进度'
		},
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'cross',
				crossStyle: {
					color: '#000'
				}
			}
		},
		toolbox: {
			feature: {
				dataView: {
					show: true,
					readOnly: false
				},
				magicType: {
					show: true,
					type: ['line', 'bar']
				},
				restore: {
					show: true
				},
				saveAsImage: {
					show: true
				}
			}
		},
		legend: {
			data: ['已用工时', '剩余工时', '完成进度']
		},
		xAxis: [{
			type: 'category',
			data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
			axisPointer: {
				type: 'shadow'
			}
		}],
		yAxis: [{
			type: 'value',
			name: '工作用时',
			min: 0,
			max: 250,
			interval: 50,
			axisLabel: {
				formatter: '{value} 小时'
			}
		},
		{
			type: 'value',
			name: '完成进度',
			min: 0,
			max: 100,
			interval: 10,
			axisLabel: {
				formatter: '{value} %'
			}
		}
		],
		series: [{
			name: '已用工时',
			type: 'bar',
			stack: '工作用时',
			data: [1, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
		},
		{
			name: '剩余工时',
			type: 'bar',
			stack: '工作用时',
			data: [2, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
		},
		{
			name: '完成进度',
			type: 'line',
			yAxisIndex: 1,
			data: [5, 15, 25, 26, 27, 15, 25, 30, 40, 35, 42, 56]
		}
		]
	};
	// 使用刚指定的配置项和数据显示图表。
	myChart.setOption(option);

	function doSearch() {
		miniui.mask("数据加载中...");
		var data = queryForm.getData(true, false);
		var node = tree.getSelectedNode();
		if (node) {
			data["departID"] = node.departID;
			data["departID_link"] = 'like';
		} else {
			data["departID"] = 'ROOT';
		}
		http.post("/project/static/progress.do", data, function (page) {
			debugger
			if (page.success) {
				var data = page.dataMap;
				/*option.xAxis.data = data.title;
				option.yAxis.max = data.maxHour;
				option.yAxis.interval = data.maxHour / 10;
				option.series[0].data = data.has;
				option.series[1].data = data.no;
				option.series[2].data = data.per;*/
				var option = {
					title: {
						text: '图纸完成进度'
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross',
							crossStyle: {
								color: '#000'
							}
						}
					},
					toolbox: {
						feature: {
							dataView: {
								show: true,
								readOnly: false
							},
							magicType: {
								show: true,
								type: ['line', 'bar']
							},
							restore: {
								show: true
							},
							saveAsImage: {
								show: true
							}
						}
					},
					legend: {
						data: ['已用工时', '剩余工时', '完成进度']
					},
					xAxis: [{
						type: 'category',
						data: data.title,
						axisPointer: {
							type: 'shadow'
						}
					}],
					yAxis: [{
						type: 'value',
						name: '工作用时',
						min: 0,
						max: data.maxHour,
						interval: data.maxHour / 10,
						axisLabel: {
							formatter: '{value} 小时'
						}
					},
					{
						type: 'value',
						name: '完成进度',
						min: 0,
						max: 100,
						interval: 10,
						axisLabel: {
							formatter: '{value} %'
						}
					}
					],
					series: [{
						name: '已用工时',
						type: 'bar',
						stack: '工作用时',
						data: data.has
					},
					{
						name: '剩余工时',
						type: 'bar',
						stack: '工作用时',
						data: data.no
					},
					{
						name: '完成进度',
						type: 'line',
						yAxisIndex: 1,
						data: data.per
					}
					]
				};
				myChart.setOption(option);
			} else {
				miniui.showLoadErrorMessageBox(page.message);
			}
			mini.unmask();
		});
	}
</script>

</html>